<template>
    
    <h2>列表显示</h2>
    代金券标题<input type="text" v-model="Vtitle">
    库存<input type="number" v-model="Vnum">
    <input type="button"  value="查询" @click="LoaData">
<table border="1" class="table table-info">
    <thead>
        <tr>
            <td>
                <input type="checkbox" v-model="quan"  @change="quanxuan" />
            </td>

            <td>代金券编号</td>
            <td>代金券标题</td>
            <td>代金券颜色</td>
            <td>代金券库存</td>
            <td>每人限领</td>
            <td>金额</td>  
            <td>代金券开始有效期</td>     
            <td>代金券结束有效期</td>
            <td>代金券使用须知</td>
            <td>客服电话</td>
            <td>门店名称</td>
            <td>操作列</td>
        </tr>
    </thead>
    <tbody>
        <tr v-for="i in voucher.Data_Info">
            <td>
                <input type="checkbox" :checked="fan" v-model="newarry" :value="i.Voucher_Id" @change="fanxuan" />
            </td>
            <td>{{ i.Voucher_Id }}</td>
            <td>{{ i.Vocher_Title }}</td>
            <td>{{ i.Vocher_Color }}</td>
            <td>{{ i.Voucher_Num }}</td>
            <td>{{ i.Voucher_Limited }}</td>
            <td>￥{{ i.Voucher_Money.toFixed(2) }}</td>
            <td>{{ i.Voucher_EDate.substring(0,10) }}</td>
            <td>{{ i.Voucher_SDate.substring(0,10) }}</td>
            <td>{{ i.Voucher_Precautions }}</td>
            <td>{{ i.Voucher_Phone }}</td>
            <td>{{i.ShopName}}</td>
            <td>
                <input type="button" value="删除" @click="AllDelVoucher" />
                <input type="button" value="修改" @click="UpdVoucher(i.Voucher_Id)" />
            </td>
        </tr>
    </tbody>
</table>
 当前共{{ voucher.TotalCount }}条,当前页{{ voucher.pageSize }}条
当前页共{{ voucher.pageIndex }}/{{voucher.PageCount  }}页 

<span>
    <a href="#" @click="PageChange('F')" style="margin-right: 20px;">首页</a>
    <a href="#" @click="PageChange('U')" style="margin-right: 20px;">上一页</a>
    <a href="#" @click="PageChange('N')" style="margin-right: 20px;">下一页</a>
    <a href="#" @click="PageChange('E')" style="margin-right: 20px;">尾页</a>
</span>
</template>
<script setup lang="ts">

import axios from 'axios';
import { onMounted,ref } from 'vue';
import { useRouter } from 'vue-router';


const Vtitle=ref("");
const Vnum=ref(null)

const router=useRouter();
const voucher:any=ref({

TotalCount:0,
PageCount:0,
Data_Info:[{
    Voucher_Id:0,
    Vocher_Title:"",
    Vocher_Color:"",
    Voucher_Num:null,
    Voucher_Limited:null,
    Voucher_Money:0,
    Voucher_EDate:"",
    Voucher_SDate:"",
    Voucher_Precautions:"",
    Voucher_Phone:"",
    Shop_Id:0,
    ShopName:""
}]
})
// const info=ref([{
// //     Vocher_Title:"",
// //     Voucher_Id:0,
// //     Vocher_Color:"",
// //     Voucher_Num:"",
// //     Voucher_Limited:"",
// //     Voucher_Money:"",
// //     Voucher_SDate:"",
// //     Voucher_EDate:"",
// //     Voucher_Precautions:"",
// //     Voucher_Phone:"",
// //     ShopName:""
// }])


// const pageInfo=ref({
//     pageIndex:1,
//     pageSize:2,
//     totalCount:0,
//     pageCount:0


// })


const page=ref({
        pageSize:2,
        pageIndex:1,
       
    })

onMounted(()=>{
    LoaData();
})
const LoaData=()=>{
    axios.get('https://localhost:7153/api/Voucher/ShowVoucher',
    
    
    {
        params:{
            Vtitle:Vtitle.value,
            Vnum:Vnum.value,
            pageIndex:page.value.pageIndex,
             pageSize:page.value.pageSize
        }
    }
    
    )

    .then(res=>{
        voucher.value=res.data
        console.log(voucher.value);
        
    })
}

//分页
const PageChange=(choose:string)=>{

switch(choose){

     case 'F':
         voucher.value.pageIndex=1;
         break;
         case 'U':
          voucher.value.pageIndex=voucher.value.pageIndex-1;
            break;
            case 'N':
                voucher.value.pageIndex=voucher.value.pageIndex+1;
               break;
                case 'E':
                    voucher.value.pageIndex=voucher.value.pageCount;
                  break;




}
 LoaData();



}





// // const quan=ref(false);
// //     const fan=ref(false);

// //     const newarry=ref([]);

// //     const quanxuan=()=>{
// //         if(quan.value){
// //             fan.value=true;
// //             newarry.value=info.value.map((i:any)=>{
// //                 return i.Voucher_Id
// //             })
// //         }
// //         else{
// //             fan.value=false;
// //             newarry.value=[];
// //         }
// //     }

    // const fanxuan=()=>{
    // //     console.log(newarry.value)
    // //     if(newarry.value.length==voucher.value.Data_Info.length){
    // //         quan.value=true;
    // //     }
    // //     else{
    // //         quan.value=false;
    //     }
    // }
    

    // const DelVoucher=()=>{
    //     if(!confirm('确定要删除吗？')){
    //         return;
    //     }
    //     axios.delete("https://localhost:7153/api/Voucher/DeleteVoucher",{
    //         params:{
    //             ids:newarry.value.toString()
    //         }
    //     })
    //     .then(res=>{
    //         if(res.data>0){
    //             alert('删除成功');
    //             LoaData();
    //         }
    //         else{
    //             alert('删除失败');
    //         }
    //     })
    //     .catch(err=>{
    //         alert(err);
    //     })
    // }



    
    const UpdVoucher=(id:number)=>{
       router.push({
        name: 'UpdateVoucher',
        params:{
            id:id
        }
       })
    }


    const quan=ref(false);
    const fan=ref(false);

    const newarry=ref([]);

    const quanxuan=()=>{
        if(quan.value){
            fan.value=true;
            newarry.value=voucher.value.Data_Info.map((i:any)=>{
                return i.Voucher_Id
            })
        }
        else{
            fan.value=false;
            newarry.value=[];
        }
    }

    const fanxuan=()=>{
        console.log(newarry.value)
        if(newarry.value.length==voucher.value.Data_Info.length){
            quan.value=true;
        }
        else{
            quan.value=false;
        }
    }
    

    const AllDelVoucher=()=>{
        if(!confirm('确定要删除吗？')){
            return;
        }
        axios.get("https://localhost:7153/api/Voucher/DeleteVoucher",{
            params:{
                ids:newarry.value.toString()
            }
        })
        .then(res=>{
            if(res.data>0){
                alert('删除成功');
                LoaData();
            }
            else{
                alert('删除失败');
            }
        })
        .catch(err=>{
            alert(err);
        })
    }
    
</script>
